<template>
    <el-tabs v-model="activeName">
        <el-tab-pane label="商品列表" name="first">
<!--            添加商品的模态框-->
            <el-dialog title="添加商品" :visible.sync="dialogFormVisible">
                <el-form style="padding-left: 40px">
                    <el-form-item label="商品名称:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-input  autocomplete="off" v-model="commName"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="选择商品类型:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-select v-model="commtype" placeholder="请选择">
                                <el-option
                                        v-for="item in commetypes"
                                        :value="item.commetypeName">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="价格:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-input  autocomplete="off" v-model="commPrice"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="员工价格:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-input  autocomplete="off" v-model="commStaffprice"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="折扣:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-input  autocomplete="off" v-model="commDiscount"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="数量:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-input  autocomplete="off" v-model="commNum"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addBooks()">确 定</el-button>
                </div>
            </el-dialog>
<!--            修改商品的模态框-->
            <el-dialog :title="title" :visible.sync="dialogFormVisible1">
                <el-form style="padding-left: 40px">
                    <el-form-item label="商品编号:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-input  autocomplete="off" v-model="commId" :disabled="true"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="商品名称:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-input  autocomplete="off" v-model="commName"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="选择商品类型:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-select v-model="commtype" placeholder="请选择">
                                <el-option
                                        v-for="item in commetypes"
                                        :value="item.commetypeName">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="价格:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-input  autocomplete="off" v-model="commPrice"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="员工价格:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-input  autocomplete="off" v-model="commStaffprice"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="折扣:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-input  autocomplete="off" v-model="commDiscount"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="数量:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-input  autocomplete="off" v-model="commNum"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="saveBooks()">确 定</el-button>
                </div>
            </el-dialog>
            <el-row>
                <el-col :span="4">
                    <el-button type="primary" @click="dialogFormVisible = true">添加商品</el-button>
                </el-col>
                <el-col>
                    <el-table
                            :data="booksData"
                            style="width: 100%">
                        <el-table-column
                                label="编号"
                                width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.commId }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="名称"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.commName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="类型ID"
                               >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.commtypeId }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="价格"
                               >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.commPrice }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="员工价格"
                                >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.commStaffprice }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="折扣"
                               >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.commDiscount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="数量"
                               >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.commNum }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                >
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" circle @click="alterBooks(scope.row)"></el-button>
                                <el-button type="danger" icon="el-icon-delete" circle @click="delBooks(scope.row.commId)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="商品类型" name="second">
            <!--添加商品类型的模态框-->
            <el-dialog title="添加商品" :visible.sync="dialogFormVisible2">
                <el-form style="padding-left: 40px">
                    <el-form-item label="商品名称:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-input  autocomplete="off" v-model="commetypeName"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="商品类型说明:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="commComm">
                            </el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="addBooksType()">确 定</el-button>
                </div>
            </el-dialog>
            <!--            修改商品类型的模态框-->
            <el-dialog :title="title" :visible.sync="dialogFormVisible3">
                <el-form style="padding-left: 40px">
                    <el-form-item label="商品类型编号:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-input  autocomplete="off" v-model="commtypeId" :disabled="true"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="商品名称:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-input  autocomplete="off" v-model="commName"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="商品类型说明:" :label-width="formLabelWidth">
                        <el-col :span="11">
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="commComm">
                            </el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="saveBooksType()">确 定</el-button>
                </div>
            </el-dialog>
            <el-row>
                <el-col :span="4">
                    <el-button type="primary" @click="dialogFormVisible2 = true">添加商品类型</el-button>
                </el-col>
                <el-col>
                    <el-table
                            :data="commetypes"
                            style="width: 100%">
                        <el-table-column
                                label="类型编号"
                                width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.commtypeId }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="类型名称"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.commetypeName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="说明"
                        >
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.commComm }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="操作"
                        >
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" circle @click="alterBooksType(scope.row)"></el-button>
                                <el-button type="danger" icon="el-icon-delete" circle @click="delBooksType(scope.row.commId)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    export default {
        name: "HotelProducts",
        data(){
            return {
                commtypeId:'',
                commetypeName:'',
                commComm:'',
                booksData:[
                    {}
                ],
                commetypes:[
                    {}
                ],
                formLabelWidth:'100px',
                dialogFormVisible:false,
                dialogFormVisible1:false,
                dialogFormVisible2:false,
                dialogFormVisible3:false,
                activeName:'first',
                title:'',
                commId:'',
                commName:'',
                commtype:'',
                commPrice:'',
                commStaffprice:'',
                commDiscount:'',
                commNum:''
            }
        },
        methods:{
            delBooks(id){

            },
            alterBooks(data){
                this.dialogFormVisible1 = true;
                this.title = '修改商品';
                this.commId = data.commId;
                this.commName = data.commName;
                this.commPrice = data.commPrice;
                this.commStaffprice = data.commStaffprice;
                this.commDiscount = data.commDiscount;
                this.commNum = data.commNum;
            },
            addBooks(){
                this.dialogFormVisible = false;
            },
            saveBooks(){
                this.dialogFormVisible1 = false;
            },
            addBooksType(){
                this.dialogFormVisible2 = false;
            },
            delBooksType(id){

            },
            alterBooksType(data){
                this.dialogFormVisible3 = true;
                this.commtypeId = data.commtypeId;
                this.commetypeName = data.commetypeName;
                this.commComm = data.commComm;
            },
            saveBooksType(){
                this.dialogFormVisible3 = false;
            }

        }
    }
</script>

<style scoped>

</style>